<script setup lang="ts">
import {onMounted, ref} from 'vue'
import TnIcon from '@tuniao/tnui-vue3-uniapp/components/icon/src/icon.vue'
import User from '@/pages/user/index.vue';
import Home from '@/pages/home/index.vue';
import Message from '@/pages/message/index.vue';
import CustomNavBar from "@/composables/header/index.vue";
import {onLoad, onPageScroll, onPullDownRefresh, onReady, onShow} from "@dcloudio/uni-app";
import {getNavBarHeight} from "@/utils/navBarHeight";
const currentMenu = ref("home");
const useRef = ref();
const messageRef = ref();

onLoad(() => {
  refreshUserInfo()
  uni.showShareMenu({
    // https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share.html
    withShareTicket: true,
    menus: ['shareAppMessage', 'shareTimeline']//开启转发好友和转发朋友圈按钮
  });
})

type tabbarItem = {
  label: string;
  icon: string;
  activeIcon: string;
}
const tabbarList = ref<Array<tabbarItem>>([
  {
    label: "首页",
    icon: "home",
    activeIcon: "home-fill",
  },
  {
    label: "消息",
    icon: "message",
    activeIcon: "comment-fill",
  },
  {
    label: "我的",
    icon: "user",
    activeIcon: "my-fill",
  }
])


/**
 * 底部导航切换
 * @param index
 */
const tabbarChangeEvent = async (index: number) => {
  const labelList:Record<number, string> = {
    0: "home",
    1: "message",
    2: "user",
  }
  // navigationBarTitleText
  uni.setNavigationBarTitle({
    title: tabbarList.value[index]?.label || ""
  })
  currentMenu.value = labelList[index];
  if(index === 2) {
    useRef.value.refreshData()
  }
  if(index === 1) {
    messageRef.value.getList();
    messageRef.value.getOpenId();
  }

  if(index === 0) {
    await homeRef.value.getData();
  }

}
const statusBarHeight = ref(0);
onMounted(() => {
  const sysInfo = uni.getSystemInfoSync()
  statusBarHeight.value = sysInfo.statusBarHeight || 20;
})

/**
 * 刷新
 */
const homeRef = ref();
const customNavBarRef = ref();
onPullDownRefresh(async () =>{
  if (currentMenu.value === 'home') {
    await homeRef.value.getData();
  } else if(currentMenu.value === 'message') {
    await messageRef.value.getList();
  } else if(currentMenu.value === 'user') {
    await useRef.value.refreshData()
  }
  customNavBarRef.value.setHeight(false);
})


/**
 * 刷新用户消息  半小时一次
 */
const refreshUserInfo = () => {
  setTimeout(() => {
    useRef.value.refreshData(true);
    refreshUserInfo();
  }, 1000 * 60 * 30)
}

onPageScroll(e => {
  const scrollTop = e.scrollTop;
  homeRef.value.handleScroll(e);
  if (scrollTop >= getNavBarHeight() + 75) {
    homeRef.value.setScroll(true);
    console.log('元素还没到指定区域')
  } else {
    homeRef.value.setScroll(false);
  }
})
</script>

<template>
  <view class="min-h-screen transition-colors duration-300 bg-white">
    <CustomNavBar v-show="currentMenu === 'message'" ref="customNavBarRef" :title="currentMenu === 'message' ? '消息' : '我的'" :isSearch="currentMenu === 'home'" :showIcon="currentMenu === 'home'" />
    <!-- 顶部导航栏 -->
    <view class="tabbar-box-content">
      <view class="tabbar-box">
        <!-- 底部导航栏 -->
        <view v-for="(item, index) in tabbarList" :key="index" class="tabbar-box-item" @click="tabbarChangeEvent(index)" :class="{'active': currentMenu === item.icon}">
          <TnIcon :name="item.activeIcon" :color="currentMenu === item.icon ? '#4B7BF5' : 'default'" />
          {{ item.label }}
        </view>
      </view>
    </view>
    <view>
      <view v-show="currentMenu === 'home'" :style="{ paddingTop: statusBarHeight - 20 + 'px' }"> <Home ref="homeRef"></Home></view>
      <view v-show="currentMenu === 'message'" :style="{ paddingTop: statusBarHeight + 42 + 'px' }"> <Message ref="messageRef"></Message></view>
      <view v-show="currentMenu === 'user'"> <User ref="useRef"></User></view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
  .tabbar-box-content {
    position: fixed;
    width: 100%;
    bottom: 0;
    padding-bottom: 20px;
    background: #F8F8F8;
    border-top-left-radius: 148px;
    border-top-right-radius: 148px;
    padding-left: 10px;
    padding-right: 10px;
    z-index: 99;
  }
  .tabbar-box{

    height: 60px;
    background: #fff;
    border-radius: 148px;
    box-shadow: 0px -2px 10px 0px rgba(202, 209, 233, 0.4);
    display: flex;
    align-items: center;
    .tabbar-box-item {
      flex: 1;
      line-height: 60px;
      text-align: center;
    }
  }
  .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .logo {
    height: 200rpx;
    width: 200rpx;
    margin: 200rpx auto 50rpx;
  }

  .text-area {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .counter {
    font-size: 36rpx;
  }

  .operation {
    margin-top: 50rpx;
  }
  .active {
    color: #4B7BF5;
  }
</style>
